<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工时大屏看板-内蒙古京航特碳科技有限</title>
    <script type="text/javascript"
            src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
</head>
<body style="width: 98.5%">


<div style="margin-bottom:10px;padding:20px 10px 20px 10px;width: 100%; text-align: center; border-bottom: 1px solid rgba(147,158,185,0.2) ">

    <img src="../images/logo.svg" width="500px"/>
    <button class="enterClass" id="a6l" style="float: right;margin-right: 10px" type="button">切换全屏</button>
    <button class="returnClass" type="button" style="display: none;float: right;margin-right: 10px">退出全屏</button>
</div>

<div style="position: absolute;top: 0;right:0;">更新时间:<span id="currentTime"></span></div>

<div id="container" style="width: 100%;height: 31rem;margin:0px 0px 0px 0px;"></div>
<!--<div id="container1" style="height: 24rem;margin:0px 0px 0px 0px;width:45%;display: inline-block;margin-left:5%;"></div>-->
<!--<div id="container2" style="height: 24rem;margin:0px 0px 0px 0px;width:45%;display: inline-block;"></div>-->

<script type="text/javascript">


    $(function () {
        $('canvas').css('right', '-5rem');
        // $('canvas').css('width','190rem');
        // $('canvas').css('top','-3%');
        $(".enterClass").click(function () {
            handleFullScreen();  //全屏
            $('.enterClass').css('display', 'none');
            $('.returnClass').css('display', 'block');
        });
        $(".returnClass").click(function () {
            exitFullscreen();   //退出全屏
            $('.enterClass').css('display', 'block');
            $('.returnClass').css('display', 'none');
        });

        function handleFullScreen() {
            var de = document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.msRequestFullscreen) {
                de.msRequestFullscreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else {
                wtx.info("当前浏览器不支持全屏！");
            }
        }

        function exitFullscreen() {
            var de = document;
            if (de.exitFullscreen) {
                de.exitFullscreen();
            } else if (de.msExitFullscreen) {
                de.msExitFullscreen();
            } else if (de.mozCancelFullScreen) {
                de.mozCancelFullScreen();
            } else if (de.webkitExitFullscreen) {
                de.webkitExitFullscreen();
            }
        }

        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                document.getElementById("a6l").click();
            }
        });
        //document.getElementById("a6l").click();


    });

    let A = "贾宏亮,李跃龙,高明冉,王刚,尹兆伟,冯文君,李文强,牛双宏,黄博兴,赵健,张永旭,杨少楠,刘柱,徐大海,陈会强,周宏海,赵俊生";
    let B = "尚永利,于爽,张金铭,贠庆波,员庆波,崔占伟,杨春健,李伟,李文强/铣,张伟强,王今,秦东军,赵小二,李永波,陈士东,葛树青";
    let noShowWorker = "姚强,魏国强,杜雪军,卢文彬,徐志杰,张良,冯文利,于爽,孙永利,张永刚"
    let aGroup = A.split(",");
    let bGroup = B.split(",");
    let noShowWorkerGroup = noShowWorker.split(",");

    let timeUnitStr = "小时"
    let timeUnit = "hour"

    console.log(aGroup.length, bGroup.length)
    loadData(false);

    function loadData(showOtherLoading) {
        container = getContainer("container", true);
     /*   containerA = getContainer("container1", showOtherLoading);
        containerB = getContainer("container2", showOtherLoading);*/
        let token = localStorage.getItem('token');
        token = token ? token : ''
        if (!token) {
            window.location = "/index.html"
            return
        }

        // Authorization
        $.ajax({
            url: '/admin/report/workHourReport',
            type: 'GET',
            dataType: "json",
            timeout: 2000000,
            headers: {
                "Authorization": token ? token : ''
            },
            data: {
                "timeUnit": timeUnit,
                "startDate": getCurrentMonthFirstDay(1),
                "endDate": getCurrentMonthFirstDay(2),
                "workShopIds": "489018,439253,439252,318400,318397,318398,318404,318399,318402,318401"
            },
            success: function (result) {
                let currentTime = getCurrentTime();
                $("#currentTime").html(currentTime);
                if (!result.data) {
                    currentWorkHour([], [])
                    partAWorkHour([], [], toFixed(0, 2))
                    partBWorkHour([], [], toFixed(0, 2))
                    return
                }
                // 请求成功时的处理逻辑
                // console.log(result.data)
                let employeeNameArray = []
                let countWorkTimeArray = []
                let aGroupEmployeeNameArray = []
                let aGroupCountWorkTimeArray = []
                let bGroupEmployeeNameArray = []
                let bGroupCountWorkTimeArray = []
                let aGroupAllCountWorkTime = 0.0;
                let bGroupAllCountWorkTime = 0.0;

                let employeeName;
                let countWorkTime;

                $.each(result.data, function (index, value) {
                    employeeName = value.employeeName;
                    countWorkTime = value.countWorkTime;
                    // console.log(employeeName + ': ' + employeeName);
                    if (noShowWorkerGroup.includes(employeeName)) {
                        return true;
                    }
                    employeeNameArray.push(employeeName)
                    countWorkTimeArray.push(countWorkTime)
                    if (aGroup.includes(employeeName)) {
                        aGroupEmployeeNameArray.push(employeeName)
                        aGroupCountWorkTimeArray.push(countWorkTime)
                        aGroupAllCountWorkTime = aGroupAllCountWorkTime + countWorkTime;
                    }

                    if (bGroup.includes(employeeName)) {
                        bGroupEmployeeNameArray.push(employeeName)
                        bGroupCountWorkTimeArray.push(countWorkTime)
                        bGroupAllCountWorkTime = bGroupAllCountWorkTime + countWorkTime;
                    }

                });

                currentWorkHour(employeeNameArray, countWorkTimeArray)
              /*  partAWorkHour(aGroupEmployeeNameArray, aGroupCountWorkTimeArray, toFixed(aGroupAllCountWorkTime, 2))
                partBWorkHour(bGroupEmployeeNameArray, bGroupCountWorkTimeArray, toFixed(bGroupAllCountWorkTime, 2))*/
            },
            error: function (xhr, status, error) {
                // 请求失败时的错误处理逻辑
                console.error('Error:', status, error);
                // 可以根据xhr对象的属性进行更详细的错误处理
                console.error('Error message:', xhr.responseText);
                if (xhr.status == 401) {
                    window.location = "/index.html"
                    return;
                }
                container.showLoading({
                    text: "加载失败，请刷新页面或联系信息部！！！",
                    x: "center",
                    y: "center",
                    textStyle: {
                        color: "red",
                        fontSize: 14
                    },
                    effect: "spin"
                });
            }
        });
    }


    setInterval(function () {
        loadData(true);
    }, 1800 * 1000)


    function getContainer(containerId, showLoading) {
        var container = document.getElementById(containerId);
        // 初始化加载对象myContainer
        var myContainer = echarts.init(container);
        if (showLoading) {
            //未获取数据前，显示loading加载动画
            myContainer.showLoading({
                text: "图表数据正在努力加载...",
                x: "center",
                y: "center",
                textStyle: {
                    color: "red",
                    fontSize: 14
                },
                effect: "spin"
            });
        }


        return myContainer;
    }

    // toFixed 修复
    function toFixed(num, s) {
        var times = Math.pow(10, s)
        var des = num * times + 0.5
        des = parseInt(des, 10) / times
        return des + ''
    }

    function currentWorkHour(n1, n3) {
        var n1 = n1;
        var n2 = null;
        var n3 = n3;

        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });

        var app = {};
        var option;
        option = {
            tooltip: {
                trigger: 'axis'
            },
            //坐标系内的绘图网格，可以理解为整个图表
            grid: {
                top: '9%',
                left: '1.5%',
                right: '2%',
                bottom: '0%',
                containLabel: true,  //grid区域是否包含坐标轴的刻度标签
            },
            legend: {
                data: ['本月工时(' + timeUnitStr + ')'],
                textStyle: {
                    //字体风格,'normal','italic','oblique'
                    fontStyle: 'normal',
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: 'bold',
                    //字体系列
                    fontFamily: 'sans-serif',
                    //字体大小
                    fontSize: 18
                },
            },
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: n1,

                    axisLabel: {
                        interval: 0,      // 坐标轴刻度标签的显示间隔
                        rotate: 50,        // 标签倾斜的角度
                        textStyle: {
                            color: 'black',
                        },

                    }

                }
            ],

            yAxis: [
                {},

            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barGap: '50%',//柱图间距
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n2,
                    markPoint: {
                        data: []
                    },
                    markLine: {}
                },
                {
                    name: '本月工时(' + timeUnitStr + ')',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n3,
                    markPoint: {
                        data: []
                    },
                    markLine: {
                        data: [
                            {
                                type: 'average', name: 'Avg',
                                lineStyle: {
                                    width: 2,
                                    color: 'green'
                                }
                            },
                        ]
                        ,
                        lineStyle: {
                            width: 2,
                            color: 'pink'
                        }
                    }
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        myChart.setOption(option);
        myChart.showLoading();
        /*myChart.showLoading({
             text: "图表数据正在努力加载...",
             x: "center",
             y: "center",
             textStyle: {
                 color:"red",
                 fontSize:14
             },
             effect:"spin"
         });*/
        myChart.hideLoading();

        window.addEventListener('resize', myChart.resize);

    }
/*
    function partAWorkHour(n1, n3, countWorkTime) {
        var n4 = n1;
        var n5 = null;
        var n6 = n3;
        var na_sum = countWorkTime;

        var dom = document.getElementById('container1');
        var myChart1 = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var option1;
        option1 = {
            title: {
                text: "A组本月工时(" + timeUnitStr + ")：" + na_sum
            },
            color: [
                'red'
            ],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['A组本月工时'],
                textStyle: {
                    //字体风格,'normal','italic','oblique'
                    fontStyle: 'normal',
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: 'bold',
                    //字体系列
                    fontFamily: 'sans-serif',
                    //字体大小
                    fontSize: 18
                },
            },
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: n4,

                    axisLabel: {
                        interval: 0,      // 坐标轴刻度标签的显示间隔
                        rotate: 50,        // 标签倾斜的角度
                        textStyle: {
                            color: 'black',
                        },

                    }

                }
            ],

            yAxis: [
                {},

            ],
            series: [
                {
                    name: '当日工时',
                    type: 'bar',

                    barGap: '50%',//柱图间距
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n5,
                    markPoint: {
                        data: []
                    },
                    markLine: {}
                },
                {
                    name: '本月工时',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n6,
                    markPoint: {
                        data: []
                    },
                    markLine: {
                        data: [
                            {
                                type: 'average', name: 'Avg',
                                lineStyle: {
                                    width: 2,
                                    color: 'green'
                                }
                            },
                        ]
                        ,
                        lineStyle: {
                            width: 2,
                            color: 'pink'
                        }
                    }
                }
            ]
        };

        if (option1 && typeof option1 === 'object') {
            myChart1.setOption(option1);
        }

        myChart1.setOption(option1);
        myChart1.showLoading();
        myChart1.hideLoading();


        window.addEventListener('resize', myChart1.resize);
    }*/

   /* function partBWorkHour(n1, n3, countWorkTime) {
        var n7 = n1;
        var n8 = null;
        var n9 = n3;
        var nb_sum = countWorkTime;

        var dom2 = document.getElementById('container2');
        var myChart2 = echarts.init(dom2, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};
        var option2;
        option2 = {
            title: {
                text: "B组本月工时(" + timeUnitStr + ")：" + nb_sum
            },
            color: [
                'blue'
            ],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['A组当日工时', 'A组本月工时'],
                textStyle: {
                    //字体风格,'normal','italic','oblique'
                    fontStyle: 'normal',
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: 'bold',
                    //字体系列
                    fontFamily: 'sans-serif',
                    //字体大小
                    fontSize: 18
                },
            },
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: n7,

                    axisLabel: {
                        interval: 0,      // 坐标轴刻度标签的显示间隔
                        rotate: 50,        // 标签倾斜的角度
                        textStyle: {
                            color: 'black',
                        },

                    }

                }
            ],

            yAxis: [
                {},

            ],
            series: [
                {
                    name: '当日工时',
                    type: 'bar',
                    itemStyle: {
                        color: 'blue',
                    },
                    barGap: '50%',//柱图间距
                    label: {
                        show: true,
                        position: 'top',

                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n8,
                    markPoint: {
                        data: []
                    },
                    markLine: {}
                },
                {
                    name: '本月工时',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (value, index) => {

                        }
                    }
                    ,
                    data: n9,
                    markPoint: {
                        data: [
                            // { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            // { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [
                            {
                                type: 'average', name: 'Avg',
                                lineStyle: {
                                    width: 2,
                                    color: 'green'
                                }
                            },
                        ]
                        ,
                        lineStyle: {
                            width: 2,
                            color: 'pink'
                        }
                    }
                }
            ]
        };

        if (option2 && typeof option2 === 'object') {
            myChart2.setOption(option2);
        }

        myChart2.setOption(option2);
        myChart2.showLoading();
        myChart2.hideLoading();

        window.addEventListener('resize', myChart2.resize);


    }*/


    function getCurrentMonthFirstDay(addNum) {
        const currentDate = new Date();
        const year = currentDate.getFullYear();//获取当前年
        const month = String(currentDate.getMonth() + addNum).padStart(2, "0");//获取当前月
        const firstDay = "01";//日
        return `${year}-${month}-${firstDay}`;
    }
    function getCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = ('0' + (now.getMonth() + 1)).slice(-2);
        const day = ('0' + now.getDate()).slice(-2);
        const hours = ('0' + now.getHours()).slice(-2);
        const minutes = ('0' + now.getMinutes()).slice(-2);
        const seconds = ('0' + now.getSeconds()).slice(-2);
        const formattedTime = year +"-"+ month +"-"+ day +" "+ hours +":"+ minutes +":"+ seconds;
        console.log(formattedTime);
        return formattedTime;
    }

    function getLastDayOfNaturalMonth() {
        // 获取当前日期
        const currentDate = new Date();

        // 获取当前年份
        let year = currentDate.getFullYear();

        // 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
        let month = String(currentDate.getMonth() + 2).padStart(2, "0");

        // 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
        if (month === '13') {
            year = year + 1;
            month = '01';
        }

        // 设置每个月的第一天为 '01'
        let firstDay = "01";

        // 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
        const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;

        // 计算当前月的最后一天，通过减去一天的毫秒数来得到
        const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);

        // 将最后一天的日期转换为 ISO 格式，并提取日期部分
        return lastDayOfMonth.toISOString().split("T")[0];
    }
</script>
</body>
</html>